<template>
  <div>
    <!--  -->
    <div class="flex mras ai-c">
      <div class="flex xinzl">
        <div @click="handlerZeng(0)" :class="{ activeNum: home == 0 }" class='sidjw'>新增量</div>
        <div @click="handlerZeng(1)" :class="{ activeNum: home == 1 }" class='sidjw'>下载量</div>
      </div>

    </div>
    <v-newAddNum v-if="home == 0" />
    <v-downloadNum v-else />
  </div>
</template>
<script>
import newAddNum from '@/component/newAddNum.vue'
import downloadNum from '@/component/downloadNum.vue'
export default {
  components: {
    'v-newAddNum': newAddNum,
    'v-downloadNum': downloadNum
  },
  data() {
    return {
      home: 0,
    };
  },

  created() {

  },
  mounted() {

  },
  beforeDestroy() {
    // document.querySelector("body").removeAttribute("style");
  },
  methods: {
    handlerZeng(index) {
      this.home = index
    },
  },
};
</script>
<style>
.mras {
  margin-bottom: 20px;
  height: 54px;
  background: #FFFFFF;
  box-shadow: 0px 0px 16px 0px rgba(200, 193, 194, 0.2000);
  border-radius: 16px;
}

.sidjw {
  width: 103px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  line-height: 26px;
}

.sidjw:first-child {
  border-right: 1px solid #E5E5E5;
}

.xinzl {
  margin-left: 30px;
  width: 206px;
  height: 26px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  text-align: center;
}

.activeNum {
  color: #fff;
  background-color: #ff5478;
}
</style>
